<section ng-init="loadModuleDatas()">
  <div class="card">
    <div class="card-body">
      <filter-list
        request="request"
        callback="loadMoreModuleDatas()"
      ></filter-list>
      <div
        class="btn-toolbar btn-toolbar-sm justify-content-end mt-3"
        role="toolbar"
        aria-label="Toolbar with button groups"
      >
        <div class="">
          <a
            href="/portal/module-data/details/{{viewmodel.id}}"
            class="btn btn-sm btn-primary px-3"
          >
            <i class="fas fa-plus"></i> Add Data
          </a>
          <a
            ng-click="exportModuleData()"
            class="btn btn-sm btn-primary text-light px-3"
          >
            <i class="fas fa-arrow-down"></i> Download Data
          </a>
          <a
            ng-if="isAdmin"
            href="/portal/module/details/{{viewmodel.id}}"
            class="btn btn-sm btn-primary px-3"
          >
            <i class="fas fa-pen"></i> Edit Module
          </a>
        </div>
      </div>
      <hr />
      <mix-module-data-table
        data="viewmodel.data"
        can-drag="request.orderBy === 'Priority' && request.direction === '0'"
        edit-url="editDataUrl"
        columns="dataColumns"
        on-delete="removeData(id)"
      >
      </mix-module-data-table>
    </div>
    <div class="card-footer">
      <paging
        class="small"
        page="viewmodel.data.page"
        page-size="viewmodel.data.pageSize"
        total="viewmodel.data.totalItems"
        ul-class="pagination justify-content-end m-0"
        a-class="page-link"
        paging-action="loadMoreModuleDatas(page-1)"
        scroll-top="true"
      ></paging>
    </div>
  </div>
</section>
